<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>

<body>
  <div th:fragment="readId">

    <style>
      .readIdContent1 ul {
        /* float: right; */
        /* width: 7.04rem; */
        width: 8.7rem;
        height: 4.46rem;
        box-sizing: border-box;
        /* margin-right: 0.4rem; */
        margin: 0 auto;
        margin-top: 0.3rem;
      }

      .readIdContent1 ul li:first-child {
        margin-right: 1rem;
      }

      .readIdContent1 ul li {
        float: left;
        /* width: 47%; */
        width: 3.02rem;
        height: 4rem;
        font-size: 0.22rem;
        text-align: center;
        /* margin-left: 0.13rem; */
        background-color: #108cbe;
        /* margin-left: 2%; */
        margin-top: 0.16rem;
        overflow: hidden;
        position: relative;
      }

      .readIdContent1 ul li:first-child {
        background: url(/public/img/no-picture.png) no-repeat center 0.7rem;
        background-size: 2rem;
      }

      .readIdContent1 ul li p {
        /* height: 0.3rem;
        width: 100%;
        color: #fff;
        line-height: 0.3rem;
        background-color: #2db5aa; */
        height: 0.5rem;
        width: 100%;
        color: #fff;
        font-size: 0.3rem;
        line-height: 0.5rem;
        background-color: #2db5aa;
      }

      .readIdContent1 ul li img {
        /* width: 3.02rem; */
        width: 100%;
        height: 3.5rem;
        display: none;
      }

      .verifyResultImg {
        width: 210px;
        height: 155px;
        position: absolute;
        top: 1rem;
        right: 1.6rem;
        display: none;
      }

      .verifyResultImg.active1 {
        background: url(/public/img/validate/identityFail.png) no-repeat;
        display: block;
      }

      .verifyResultImg.active {
        background: url(/public/img/validate/identitySuccess-red.png) no-repeat;
        display: block;
      }

      .readContent .countdown {
        font-size: 3rem;
        width: 100%;
        display: block;
        text-align: center;
        margin-top: 1.5rem;
        line-height: 3rem;
        opacity: 0;
      }

      .readContent .countdownStart {
        font-size: 2rem;
        width: 100%;
        display: block;
        text-align: center;
        margin-top: 1.5rem;
        line-height: 3rem;
      }
      .videoBox{
        position: absolute;
        width: 100%;
      }
    </style>
    <!-- 自助送物 -->
    <div class="validateLogo"></div>
    <div class="readId">
      <div class="readHeader">
        <span class="readHeaderText">
          <span class="readHeaderIcon"></span>
          欢迎使用自助送物系统!
        </span>
        <span class="BackHomeBtn" id="backHomeBtn">
          <span class="BackHomeIcon"></span>
          <span class="BackHomeText">返回首页</span>
        </span>
      </div>

      <div class="readContent">
        <!-- 放入身份证 -->
        <div class="readIdContent">
          <h1>请将你的身份证放到读卡器上</h1>
          <div class="readIdVideo">
            <div class="readIdTextBox">
              <!-- <div class="readIdText">视频演示放入身份证</div>
                            <div class="readingId">
                                <div>正在读取信息请稍后</div>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                            </div> -->
            </div>
            <div class="readIdMove"></div>
          </div>
        </div>
        <!-- 输入身份证号码界面 -->
        <div class="entryinfo">
          <div class="entryName mg10">
            <i>送物人姓名:</i><span>王沙路</span>
          </div>
          <div class="entryId mg10">
            <i>送物人身份证号:</i><span class="entryIdName"></span>
          </div>
          <div class="entryAddress mg10">
            <i>送物人地址:</i><span class="entryIdName"></span>
          </div>
          <div class="phoneNumber mg10">
            <i>送物人手机号:</i>
            <span class="phoneNumberText"></span>

            <input type="text" placeholder="请输入您的11位手机号" id="phoneNum" value="" />
            <div class="entryPhoneText">
              <!-- 软键盘 -->
              <!--<input id="txtNum" type="text" />-->
              <!--<input id="btnEnter" type="button" value="Enter" onclick="return btnEnter_onclick()" />-->
              <span id="phoneNum1" onclick="return phoneNum_onclick(1)">1</span>
              <span id="phoneNum2" onclick="return phoneNum_onclick(2)">2</span>
              <span id="phoneNum3" onclick="return phoneNum_onclick(3)">3</span>
              <span id="phoneNumDel" onclick="return phoneNumDel()"></span>
              <span id="phoneNum4" onclick="return phoneNum_onclick(4)">4</span>
              <span id="phoneNum5" onclick="return phoneNum_onclick(5)">5</span>
              <span id="phoneNum6" onclick="return phoneNum_onclick(6)">6</span>
              <i class="phoneNumCancel">清除</i>
              <span id="phoneNum7" onclick="return phoneNum_onclick(7)">7</span>
              <span id="phoneNum8" onclick="return phoneNum_onclick(8)">8</span>
              <span id="phoneNum9" onclick="return phoneNum_onclick(9)">9</span>
              <span id="phoneNumX" onclick="return phoneNum_onclick('X')">X</span>
              <span id="phoneNum0" onclick="return phoneNum_onclick(0)">0</span>
              <i class="phoneNumSure">确定</i>
              <!--<span id="ButtonClear" onclick="return phoneNumClear()">清除</span>-->
            </div>
          </div>
          <div class="mg10">
            <i>与在押人员关系:</i>
            <span class="selectText"></span>
            <select>
              <option selected="selected">夫妻</option>
              <option>父子</option>
              <option>母子</option>
              <option>子女</option>
              <option>亲属</option>
              <option>朋友</option>
              <option>委托人</option>
            </select>
          </div>
          <div class="entryTextBox mg10">
            <i>在押人员身份证号:</i>
            <input type="text" placeholder="18位身份证号" id="txtNum" value="" />
            <div class="entryIdText">
              <!-- 软键盘 -->
              <!--<input id="txtNum" type="text" />-->
              <!--<input id="btnEnter" type="button" value="Enter" onclick="return btnEnter_onclick()" />-->
              <span id="Button1" onclick="return btnNum_onclick(1)">1</span>
              <span id="Button2" onclick="return btnNum_onclick(2)">2</span>
              <span id="Button3" onclick="return btnNum_onclick(3)">3</span>
              <span id="ButtonDel" onclick="return delText()"></span>
              <span id="Button4" onclick="return btnNum_onclick(4)">4</span>
              <span id="Button5" onclick="return btnNum_onclick(5)">5</span>
              <span id="Button6" onclick="return btnNum_onclick(6)">6</span>
              <i class="cancelId">清除</i>
              <span id="Button7" onclick="return btnNum_onclick(7)">7</span>
              <span id="Button8" onclick="return btnNum_onclick(8)">8</span>
              <span id="Button9" onclick="return btnNum_onclick(9)">9</span>
              <span id="Buttonx" onclick="return btnNum_onclick('X')">X</span>
              <span id="Button0" onclick="return btnNum_onclick(0)">0</span>
              <i class="sureId">确定</i>
              <!--<span id="ButtonClear" onclick="return clearText()">清除</span>-->
            </div>
          </div>
          <div class="inmatesInfoBox mg10">
            <i class="inmatesName">在押人员姓名:</i>
            <span class="inmatesNameText"></span>
          </div>
          <!-- goto -->
          <div class="inmatesInfoBox mg10">
            <i class="inmatesName">账户余额(元):</i>
            <span class="money"></span>
          </div>

          <!-- todo -->
          <!-- <div class="inmatesInfoBox mg10" style="display:none;">
            <i class="inmatesName">在押人员照片:</i>
            <div class="inmatesNameBox">
              <div class="inmatesImg">
                <img src="/public/img/defaultPhoto.png" alt="" />

              </div>
            </div>
          </div> -->
          <div class="entryinfoBtnbox" id="entryinfoBtnbox1">
            <!-- <div class="back"><a href="f2://">返回</a></div> -->
            <div class="nextStep" id="nextStep1">下一步</div>
          </div>

          <div class="entryinfoBtnbox" id="entryinfoBtnbox2">
            <!-- <div class="back">返回</div> -->
            <div class="nextStep" id="nextStep2">下一步</div>
          </div>
        </div>

        <div class="userPhoneErr">手机号码输入不合法!</div>
        <div class="userIdErr">身份证号码输入不合法!</div>
        <div class="userIdErr2">未查询到此人员!</div>
      </div>
      <div class="readContent countdownBox">
        <h1>请将人脸对准自助机摄像头<br />点击下一步进行人脸抓拍比对......</h1>
        <span class="countdown"></span>
        <span class="countdownStart"></span>
        <span class="countdownStartBtn">下一步</span>
      </div>
      <div class="readContent readIdContentVerify">
        <div class="readIdContent1">
          <h1>正在进行人脸比对......</h1>
          <ul>
            <li>
              <p>身份证</p>
              <img src="" />
            </li>
            <li style="width: 4.6rem;">
              <p>抓拍</p>
              <span class="videoLoading">正在调用摄像头......</span>
              <div class="videoBox">
                <img src="" />
                <div class="demo-frame">
                  <div class="demo-container">
                    <video id="video1" width="100%" height="100%" preload autoplay loop muted></video>
                    <canvas id="canvas1" width="460" height="350"></canvas>
                  </div>
                </div>

                <canvas id="canvasPic" width="640" height="480"></canvas>
                <img src="" id="img" width="480" height="320" style="margin-left: 20px;">
              </div>
        </div>

        <article>
          <style>
            .sectionvideo {
              width: 3.02rem;
              height: 3.5rem;
              position: relative;
              display: none;
            }

            article section #video {
              width: auto;
              height: 3.5rem;
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
            }
          </style>
          <!-- width: 3.02rem;
          height: 3.5rem; -->
          <section class="sectionvideo">
            <video id="video"></video>
          </section>
          <section style="display:none;">
            <audio id="audio"></audio>
          </section>
          <section style="display:none;">
            <canvas id="canvas" width="320" height="240"></canvas>
          </section>
          <section><img src="" alt="" id="img" /></section>
        </article>
        </li>
        </ul>
        <!-- 人证合一logo -->
        <!-- <div class="verifyResultImg">

          </div> -->
        <div class="nextStep0">下一步</div>
        <div class="backStep0">重试</div>
      </div>
    </div>

    <audio autoplay="autoplay" id="audioAll" src=""></audio>
  </div>

  <div style="display:none;">
    <style>
      .booth {
        width: 400px;

        background: #ccc;
        border: 10px solid #ddd;
        margin: 0 auto;
      }
    </style>


    <!-- <script>
        let convas = document.querySelector("#canvas"); //
        let video = document.querySelector("#video");
        let audio = document.querySelector("audio");
        let img = document.querySelector("#img");
        let btn = document.querySelector("button");
        let context = canvas.getContext("2d");
        let width = 320; //视频和canvas的宽度
        let height = 0; //
        let streaming = false; // 是否开始捕获媒体
  
        // 获取用户媒体,包含视频和音频
        navigator.mediaDevices
          .getUserMedia({ video: true, audio: false })
          .then(stream => {
            video.srcObject = stream; // 将捕获的视频流传递给video  放弃window.URL.createObjectURL(stream)的使用
            video.play(); //  播放视频
            audio.srcObject = stream;
            audio.play();
          });
  
        function tackcapture() {
          // 需要判断媒体流是否就绪
          if (streaming) {
            context.drawImage(video, 0, 0, 350, 200); // 将视频画面捕捉后绘制到canvas里面
            img.src = canvas.toDataURL("image/png"); // 将canvas的数据传送到img里
          }
        }
  
        btn.addEventListener("click", tackcapture, false); // 按钮点击事件
  
        // 监听视频流就位事件,即视频可以播放了
        video.addEventListener(
          "canplay",
          function (ev) {
            if (!streaming) {
              height = video.videoHeight / (video.videoWidth / width);
  
              video.setAttribute("width", width);
              video.setAttribute("height", height);
              canvas.setAttribute("width", width);
              canvas.setAttribute("height", height);
              streaming = true;
            }
          },
          false
        );
      </script> -->
  </div>
  </div>
</body>

</html>